@import "reset.css";
@import "../font/iconfont.css";

#page {
  max-width: 750px;
  margin: 0 auto;
}
html,
body,
#page {
  height: 100%;
}
#page {
  display: flex;
  flex-direction: column;
  max-width: 750px;
  margin: 0 auto;
}
/*顶部*/
#header_top{
    height: .64rem;
    display: flex;
    background-color: #ff6040;
    padding: .45rem .12rem .32rem .33rem;
    color: #ffdfd8;
    font-size: .3rem;
    align-items: center;
    justify-content: space-between;
    p{
        span{
            &.iconfont{
                font-size: .3rem;
                color: #ffdfd8;
            }            
        }
        &:nth-child(1){
            margin-left: 3.23rem;
            
        }
        &:nth-child(2){
            width: 1.74rem;
            height: .64rem;
            border: 1px solid #ff8a6f;
            border-radius: .4rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-around;
            position: relative;
            i{
                width: 1px;
                height: 0.37rem;
                background-color: #ff896e;
                position: absolute;
            }
        }
        
    }
}

/*导航*/
nav{
    height: .6rem;
    background: linear-gradient(#ff6040,#ff887d);
    ul{
        display: flex;
        height: .6rem;
        padding: 0 .4rem 0 .4rem;
        justify-content: space-between;        
        li{
            height: .6rem;
            display: flex;
            width: .9rem;
            align-items: center;            
            a{
                display: block;
                color: #fff3f2;
                font-size: .26rem;
                position: absolute;
                &.iconfont{
                    color: #fff3f2;
                    font-size: .26rem;
                }
                &.cur{
                    font-size: .3rem;
                    font-weight: bold;                    
                }
                i{
                    width: .4rem;
                    height: .04rem;
                    background-color: #fff;
                    border-radius: .02rem;
                    position: absolute;
                    bottom: -.1rem;
                    left: .45rem;
                }
            }
        }
    }
}

/*内容*/ 
    main{
        width: 7.5rem;
    }

/*全选*/ 
#con{
    height: .72rem;
    padding: 0 .2rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    h2{
        font-size: .3rem;
        margin-left: .2rem;
        color: #333333;
        font-weight: bold;
        white-space: nowrap;
    }
    span{
        font-size: .22rem;
        white-space: nowrap;
        &:nth-of-type(2){
            color: #ff8268;
            margin-right: 0;
            margin-left: .4rem;
            
            
        }
        &:nth-of-type(1){
            color: #333333;
            margin-left: 3.6rem;
            position: relative;
            i{
                width: .02rem;
                height: .22rem;
                background-color: #979797;
                position: absolute;
                top: .05rem;
                right: -.2rem;
            }
        }
    }
    
}
.con1{
    margin-top: .4rem;
}

/*购物车*/ 
#cart{
    height: 7.7rem;
    background-color: #fff;
    ul{
        margin-top: .2rem;
        padding: .2rem;
        box-sizing: border-box;
        li{
            height: 2.16rem;
            display: flex;
            align-items: center;
            margin-bottom: .4rem;
            &.last{
                margin-bottom: 0;
            }
            div{
                &:nth-child(1){                    
                    margin-right: .2rem;
                    color: #ff6040;                    
                }
                &:nth-child(2){                    
                    margin-right: .3rem;                    
                }                                
               img{
                    height: 2.16rem;
               }
                &.right{
                    height: 2.16rem;                    
                    p{
                        white-space: nowrap;
                        &:nth-child(1){
                            font-size: .3rem;
                            color: #333333;
                            width: 4.1rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;                           
                        }
                        &:nth-child(2){
                            font-size: .26rem;
                            color: #999999;
                            width: 4.1rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            margin-top: .08rem;
                        }
                        &:nth-child(3){
                            width: 1.48rem;
                            height: .32rem;
                            line-height: .32rem;
                            background-color: #f2f2f2;
                            color: #333333;
                            font-size: .18rem;
                            white-space: nowrap;
                            margin-right: 0;
                            padding: 0 .05rem 0 .05rem;
                            margin-top: .2rem;
                            border-radius: .05rem;
                            display: flex;
                            justify-content: space-between;
                            span{
                                white-space: nowrap;
                                &.iconfont{
                                    
                                    font-size: .14rem;
                                    color: #333333;
                                }
                            }
                        }
                        &:nth-child(4){
                            font-size: .18rem;
                            color: #ff694b;
                            margin-top: .08rem;
                        }
                        &:nth-child(5){
                            font-size: .14rem;
                            span{
                                color: #333333;
                                &:nth-of-type(1){
                                    color: #ff6040;
                                }
                                &:nth-of-type(2){
                                    font-size: .4rem;
                                    margin-left: .85rem;
                                }
                                &:nth-of-type(3){
                                    display: inline-block;
                                    font-size: .4rem;
                                    background-color: #f2f2f2;
                                    width: .8rem;
                                    height: 0.4rem;
                                    text-align: center;
                                    line-height: .4rem;
                                    font-size: .3rem;
                                }
                                &:nth-of-type(4){
                                    font-size: .4rem;
                                }
                            }
                            i{
                                font-size: .3rem;
                                color: #ff6040;
                                margin-left: -.1rem;
                            }
                            del{
                                color: #9f9f9f;
                            }
                        }
                    }
                } 
            }
            
        }
    }
    
}

/*结算*/
#settlement{
    height: 0.98rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    border-top: 1px solid #cccccc;
    padding-left: .2rem;
    justify-content: space-between;
    input{
        margin-right: .2rem;
    }
    p{
        white-space: nowrap;
        &:nth-of-type(1){
            margin: 0 1rem 0 .01rem;
            font-size: .3rem;
            color: #333333;
        }
        &:nth-of-type(2){
            display: flex;
            flex-direction: column;
            // margin-right: .35rem;
            span{
                &:first-child{
                    font-size: .3rem;
                    color: #333333;
                }
                &:last-child{
                    font-size: .18rem;
                    color: #9c9c9c;
                }
            }
        }
        &:nth-of-type(3){
            display: flex;
            align-items: flex-end;
            flex-direction: column;
            margin: 0 .2rem 0 .3rem;
            span{
                &:nth-child(1){
                    font-size: .3rem;
                    color: #ff6040;
                }
                &:last-child{
                    font-size: .18rem;
                    color: #9c9c9c;
                }
            }
        }
        &:nth-of-type(4){
            width: 2.2rem;
            height: .98rem;
            background-color: #ff6040;
            font-size: .32rem;
            color: #fff;
            text-align: center;
            line-height: .98rem;
        }
    }
} 

/*尾部*/
footer{
    height: 1.66rem;
    border-top: 1px solid #cccccc;
    padding: .14rem 0 .16rem 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;   
    ul{
        display: flex;
        justify-content: space-around;
        li{
            display: flex;
            flex-direction: column;
            align-items: center;
            &.cur{
                color: #ff6040;
            }
            color: #acacac;
            font-size: .18rem;
            span{
                &.iconfont{
                    color: 999999;
                    font-size: .4rem;
                }
            }
            
        }
    }
    p{
        width: 2.7rem;
        height: .1rem;
        background-color: #000;
        border-radius: .05rem;
        margin-left: 2.4rem;
    }
}